<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!doctype html>

<head>
<meta charset="utf-8">
<title>Tasty - Recipes, Food Website and Blog Template - Responsive, Html5, CSS3, jquery </title>
<meta name="description" content="Recipes Template, Food Template Recipes Blog Template, cooking, Food, chef, Responsive Template, html5 Template, html5, css3, jquery, responsive">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="${pageContext.request.contextPath}/pages/js/html5.js"></script>
<link href='http://fonts.googleapis.com/css?family=Noticia+Text:400,400italic,700,700italic|Crete+Round:400,400italic|Lobster|Lobster+Two:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="${pageContext.request.contextPath}/pages/css/style.css">
<link id="color" rel="stylesheet" href="${pageContext.request.contextPath}/pages/css/color1.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/pages/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/pages/css/mediaelementplayer.min.css" />
<link href="${pageContext.request.contextPath}/pages/colorbox/colorbox.jsp" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<!--头部开始-->
<header id="header" class="clearfix">
  <div class="headerstrip"><div class="spiral"></div></div>

  <div class="container clearfix">
    <a href="${pageContext.request.contextPath}/pages/index.jsp" id="logo">
      <img src="${pageContext.request.contextPath}/pages/images/logo.png" alt="Tasty Delicious Recipes">
    </a>
    <nav id="topnav">
      <ul>
        <li>
           <a  href="${pageContext.request.contextPath}/IndexWeb/findIndex.do" data-description="Home page">首页</a>
        </li>

        <li>
          <a  href="${pageContext.request.contextPath}/pages/menu.jsp" data-description="Menu page">菜谱大全</a>
          <ul>
            <li><a href="${pageContext.request.contextPath}/pages/menu.jsp">凉菜 </a>
            </li>
            <li><a href="${pageContext.request.contextPath}/pages/menu.jsp">热菜</a>
            </li>
            <li><a href="${pageContext.request.contextPath}/pages/menu.jsp">甜品 </a>
            </li>
            <li><a href="${pageContext.request.contextPath}/pages/menu.jsp">小吃</a>
            </li>
            <li><a href="${pageContext.request.contextPath}/pages/menu.jsp">西餐 </a>
            </li>
            <li><a href="${pageContext.request.contextPath}/pages/menu.jsp">饮品 </a>
            </li>
          </ul>
        </li>

        <li>
          <a href="${pageContext.request.contextPath}/pages/cook.jsp" data-description="Cook page">食谱攻略</a>
          <ul>
            <li><a href="${pageContext.request.contextPath}/pages/cook.jsp">烝</a> </li>
            <li><a href="${pageContext.request.contextPath}/pages/cook.jsp">煮</a>
            <li><a href="${pageContext.request.contextPath}/pages/cook.jsp">炒</a></li>
            <li><a href="${pageContext.request.contextPath}/pages/cook.jsp">炖</a> </li>
            <li><a href="${pageContext.request.contextPath}/pages/cook.jsp">烘焙</a></li>
            <li><a href="${pageContext.request.contextPath}/pages/cook.jsp">其他</a></li>

          </ul>
        </li>

        <li>
          <a href="${pageContext.request.contextPath}/pages/info.jsp" data-description="News page">新闻资讯</a>
        </li>

        <li  class="active">
          <a href="${pageContext.request.contextPath}/pages/ranking.jsp" data-description="Ranking page">美食排行</a>
        </li>

        <li>
          <a href="#" data-description="Personal Center">个人中心</a>
        </li>

      </ul>
    </nav>
  </div>
</header>


<!--Middle Part Start-->
<section id="maincontainer" class="container clearfix">
  <h1 class="heading1">美食 <span>排行</span>
  </h1>
  <!--leftpart-->
  <section class="mb20 leftpart">
    <ul class="recipelist">
      <li class="clearfix">
            <div class="recipegridimage">
        	<img alt="" src="${pageContext.request.contextPath}/pages/recipeimg/recipeimg2.jpg">
            </div>
        <div class="recipedetails">
          <a class="title" href="${pageContext.request.contextPath}/pages/menudetail.jsp">标题</a>
          <p> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s tandard dummy text ever since the 1500s. </p>
          <ul class="rate">
            <li class="on"></li>
            <li class="on"></li>
            <li class="on"></li>
            <li class="on"></li>
            <li class="off"></li>
          </ul>
          <a href="${pageContext.request.contextPath}/pages/menudetail.jsp" class="fr">更 多 &gt;&gt;</a>
        </div>
      </li>
      <li class="clearfix">
        <div class="recipegridimage">
          <img alt="" src="${pageContext.request.contextPath}/pages/recipeimg/recipeimg2.jpg">
        </div>
        <div class="recipedetails">
          <a class="title" href="${pageContext.request.contextPath}/pages/menudetail.jsp">标题</a>
          <p> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s tandard dummy text ever since the 1500s. </p>
          <ul class="rate">
            <li class="on"></li>
            <li class="on"></li>
            <li class="on"></li>
            <li class="on"></li>
            <li class="off"></li>
          </ul>
          <a href="${pageContext.request.contextPath}/pages/menudetail.jsp" class="fr">更 多 &gt;&gt;</a>
        </div>
      </li>
  </ul>
      <!--paging-->
    <section class="paging">
      <ul>
        <li class="prev"><a href="#"><< 上一页 </a></li>
        <li><a href="#">1</a></li>
        <li class="current">2</li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li class="next"><a href="#">下一页 >></a></li>
      </ul>
    </section>
  </section>
  <!--Sidebar start-->
  <aside class="blogright">
    <div class="sidecontainer">
      <h4 class="heading4">搜索 </h4>
      <input type="text" class="blogserach" onBlur="if(this.value=='')this.value='请输入要搜索的内容...';" onFocus="if(this.value=='请输入要搜索的内容...')this.value='';" value="请输入要搜索的内容...">
    </div>
    <div class="sidecontainer">
      <h4 class="heading4">菜谱分类 </h4>
      <ul class="blogcaterg">
        <li><a href="${pageContext.request.contextPath}/pages/ranking.jsp">凉菜 </a>
        </li>
        <li><a href="${pageContext.request.contextPath}/pages/ranking.jsp">热菜</a>
        </li>
        <li><a href="${pageContext.request.contextPath}/pages/ranking.jsp">甜品 </a>
        </li>
        <li><a href="${pageContext.request.contextPath}/pages/ranking.jsp">小吃</a>
        </li>
        <li><a href="${pageContext.request.contextPath}/pages/ranking.jsp">西餐 </a>
        </li>
      </ul>
    </div>
    <div class="sidecontainer">
      <h4 class="heading4">新秀菜谱</h4>
      <div class="tabs-container">
        <div class="tabdata" id="tabdata1">
          <div class="popular">
            <ul class="popular">
              <li><img src="${pageContext.request.contextPath}/pages/images/recipethumb1.jpg" alt="">
                <a href="${pageContext.request.contextPath}/pages/menudetail.jsp" class="entrytitle">Best Recipe of the World...</a>
                <div class="entry-meta">
                  <span class="published">May 5, 2012</span>
                  <span class="meta-sep">·</span>
                <span class="comment-count"><a>3 Comments</a>
                </span>
                  <ul class="rate">
                    <li class="on"></li>
                    <li class="on"></li>
                    <li class="on"></li>
                    <li class="on"></li>
                    <li class="off"></li>
                  </ul>
                </div>
              </li>
              <li><img src="${pageContext.request.contextPath}/pages/images/recipethumb2.jpg" alt="">
                <a href="${pageContext.request.contextPath}/pages/menudetail.jsp" class="entrytitle">Lorem ipsum dolor Lorem ipsum...</a>
                <div class="entry-meta">
                  <span class="published">May 5, 2012</span>
                  <span class="meta-sep">·</span>
                <span class="comment-count"><a>3 Comments</a>
                </span>
                  <ul class="rate">
                    <li class="on"></li>
                    <li class="on"></li>
                    <li class="on"></li>
                    <li class="on"></li>
                    <li class="off"></li>
                  </ul>
                </div>
              </li>
              <li><img src="${pageContext.request.contextPath}/pages/images/recipethumb3.jpg" alt="">
                <a href="${pageContext.request.contextPath}/pages/menudetail.jsp" class="entrytitle">Lorem ipsum dolor Lorem ipsum...</a>
                <div class="entry-meta">
                  <span class="published">May 5, 2012</span>
                  <span class="meta-sep">·</span>
                <span class="comment-count"><a>3 Comments</a>
                </span>
                  <ul class="rate">
                    <li class="on"></li>
                    <li class="on"></li>
                    <li class="on"></li>
                    <li class="on"></li>
                    <li class="off"></li>
                  </ul>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </aside>
</section>
<!--Footer Start-->
<footer id="footer" class="clearfix">
  <div class="footerbg clearfix">
    <ul class="footersection container">
      <li class="testimonial">
        <h4>Testimonial</h4>
        <p class="testi">
          "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took
        </p>
    
        <span>Mr. Lorem Ipsum <br>
        C.E.O.</span>
      </li>
      <li class="links">
        <h4>Categories</h4>
        <ul>
          <li>
            <a  href="${pageContext.request.contextPath}/pages/recipedetails.jsp">Spicy Food Special</a>
          </li>
          <li>
            <a href="${pageContext.request.contextPath}/pages/recipedetails.jsp">Rice</a>
          </li>
          <li>
            <a href="${pageContext.request.contextPath}/pages/recipedetails.jsp">Snacks</a>
          </li>
          <li>
            <a href="${pageContext.request.contextPath}/pages/recipedetails.jsp">Spicy Sea Food</a>
          </li>
          <li>
            <a href="${pageContext.request.contextPath}/pages/recipedetails.jsp"> Tasty Special Food</a>
          </li>
        </ul>
      </li>
      <li class="twiitersection">
        <h4>Twitter</h4>
        <div id="twitter">
        </div>
      </li>
      <li class="flickrsection">
        <h4>Flickr</h4>
        <div id="flickr">
          <ul id="cbox" class="thumbs">
          </ul>
        </div>
      </li>
    </ul>
  </div>
  
  <!--Social links Start-->
  <section id="social" class="container">
    <div class="leftline">@2012 All images & icons are copyright to their owners.</div>
    <div id="footersocial">
      <a class="facebook" title="Facebook" href="#">Facebook</a>
      <a class="twitter" title="Twitter" href="#">Twitter</a>
      <a class="linkedin" title="Linkedin" href="#">Linkedin</a>
      <a class="blooger" title="Blogger" href="#">Blogger</a>
      <a class="rss" title="rss" href="#">rss</a>
      <a class="dig" title="Dig" href="#">Dig</a>
      <a class="googleplus" title="Googleplus" href="#">Googleplus</a>
      <a class="skype" title="Skype" href="#">Skype</a>
      <a class="flickr" title="Flickr" href="#">Flickr</a>
    </div>
  </section>
  <!--Social links End-->
  <!--Go to Top-->
  <a title="Go Top" id="gotop" href="#">&nbsp;</a>
</footer>
<!--Footer End-->

<!--Javascripts-->
<script src="${pageContext.request.contextPath}/pages/js/jquery-latest.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/pages/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/pages/js/jquery.isotope.min.js"></script>
<script src="js/mediaelement-and-player.min.js"></script>
<script  type="text/javascript" src="${pageContext.request.contextPath}/pages/js/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/pages/js/jquery.elastislide.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/pages/js/jquery.tweet.js"></script><script type="text/javascript" src="${pageContext.request.contextPath}/pages/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/pages/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script  type="text/javascript" src="${pageContext.request.contextPath}/pages/js/jquery.validate.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/pages/js/jquery.gmap.js"></script>
<script src="${pageContext.request.contextPath}/pages/js/jflickrfeed.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/pages/js/script.js"></script>
<div style="display:none"><script src='http://v7.cnzz.com/stat.php?id=155540&web_id=155540' language='JavaScript' charset='gb2312'></script></div>
</body>
</html>